{{ define "js" }}
  <script type="text/javascript" src="/js/bootstrap4-toggle.min.js"></script>
  <script>
    const collection = document.querySelectorAll(".convertmetoutf8")
    collection.forEach((element) => {
      // convert to utf8
      viewHexDataAs(element.id, "utf-8")
    })

    {{ if len .RelaysInfoContainers }}
      const relays = {{ .RelaysInfoContainers }}
      activateTabbarSwitcher("poolTable", "poolTabs", `t${relays[0].Days}d`)
    {{ end }}
    activateTabbarSwitcher("blocksTable", "blockTabs", "latest_blocks")
  </script>
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/bootstrap4-toggle.min.css" />
{{ end }}

{{ define "content" }}
  <section>
    <div class="container">
      <div class="h-100 py-4">
        <div class="row mt-4">
          <div class="col-md-12">
            <h1>Relays:</h1>
            <p>
              Validators can use Relays to outsource their Block Production to entities specialized in extracting extra revenue. These Relays exists a means of minimizing required trust under the participating entities - they only have to trust the relay itself, and not each other. <br />
              Extra Revenue is generated by reordering and/or inserting transactions in an otherwise normal block. This is often referred to as MEV, or "Maximum-Extractable-Value". The validator which gets to propose a block by a relay will get a cut of this revenue in exchange, shown below as the "block reward".<br />
              A Relay can consist of a single builder, in which case the relay builder will accept transaction bundles from searchers, or many builders, where the relay operator will pick the the block of the builder with the highest block reward.
            </p>
            <ul class="nav nav-tabs border-0 justify-content-end" role="tablist" id="poolTabs">
              {{ range $index, $d := .Data.RelaysInfoContainers }}
                <li class="nav-item">
                  <a class="nav-link {{ if $d.IsFirst }}active{{ end }}" id="t{{ $d.Days }}d_n" data-toggle="tab" href="#t{{ $d.Days }}d" role="tab" aria-controls="t{{ $d.Days }}d" aria-selected="true"><span class="tab-text">{{ $d.Days }} Days</span></a>
                </li>
              {{ end }}
            </ul>
            <div id="poolTable" class="table-responsive tab-content card px-0 pb-1 mb-2">
              {{ range $index, $d := .Data.RelaysInfoContainers }}
                <div class="tab-pane fade" id="t{{ $d.Days }}dTabPanel" role="tabpanel" aria-labelledby="t{{ $d.Days }}d_n">
                  <table class="table" id="staking-pool-table">
                    <div class="m-3">Network Participation: {{ .NetworkParticipation | formatPercentage }}%</div>
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Block Count</th>
                        <th>Unique Builders</th>
                        <th>Average Reward</th>
                        <th>Highest Reward</th>
                        <th>Overall Rewards</th>
                        <th><span data-toggle="tooltip" data-placement="top" title="Does not block any addresses on sanction lists.">Uncensored</span></th>
                        <th><span data-toggle="tooltip" data-placement="top" title="Does not restrict what kind of bundles searchers can make.">Unfiltered</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      {{ range $d.RelaysInfo }}
                        <tr>
                          {{ if .Link.Valid }}
                            <td><a href="{{ .Link.String }}" target="_blank" rel="noreferrer noopener">{{ .Name.String }}</a></td>
                          {{ else }}
                            <td>{{ .Name.String }}</td>
                          {{ end }}
                          <td>{{ .BlockCount }} ({{ formatPercentageWithPrecision .NetworkUsage 2 }}%)</td>
                          <td>{{ .UniqueBuilders }}</td>
                          <td>{{ formatAmount .AverageValue.BigInt "ETH" 8 }}</td>
                          <td>{{ formatAmount .MaxValue.BigInt "ETH" 8 }} (Slot {{ formatBlockSlot .MaxValueSlot }})</td>
                          <td>{{ formatAmount .TotalValue.BigInt "ETH" 8 }}</td>
                          {{ if .Censors.Valid }}
                            <td>{{ formatYesNo (not .Censors.Bool) }}</td>
                          {{ else }}
                            <td><span class="badge badge-pill bg-info text-white" style="font-size: 12px; font-weight: 500;">???</span></td>
                          {{ end }}
                          {{ if .Ethical.Valid }}
                            <td>{{ formatYesNo (not .Ethical.Bool) }}</td>
                          {{ else }}
                            <td><span class="badge badge-pill bg-info text-white" style="font-size: 12px; font-weight: 500;">???</span></td>
                          {{ end }}
                        </tr>
                      {{ end }}
                    </tbody>
                  </table>
                </div>
              {{ end }}
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-md-12">
            <h3>Blocks:</h3>
            <p>Blocks proposed using Relays contain a block reward paid out to the validator. Blocks themselves can be published by builders/relays to other relays as well, causing them be tagged under multiple Relays.</p>
            <ul class="nav nav-tabs border-0 justify-content-end pt-2" role="tablist" id="blockTabs">
              <li class="nav-item">
                <a class="nav-link active" id="latest_blocks_tab" data-toggle="tab" href="#latest_blocks" role="tab" aria-controls="latest_blocks" aria-selected="true"><span class="tab-text">Latest Blocks</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="top_blocks_tab" data-toggle="tab" href="#top_blocks" role="tab" aria-controls="latest_blocks" aria-selected="true"><span class="tab-text">Top Blocks</span></a>
              </li>
            </ul>
            <div id="blocksTable" class="table-responsive tab-content card px-0 pb-1 mb-2">
              <div class="tab-pane fade" id="latest_blocksTabPanel" role="tabpanel" aria-labelledby="latest_blocks_tab">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Slot</th>
                      <th>Proposer</th>
                      <th>Relays</th>
                      <th>Block Reward</th>
                      <th>Block Extra Data</th>
                      <th>Proposer Fee Recipient</th>
                      <th>Builder</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{ range .Data.RecentBlocks }}
                      <tr>
                        <td>{{ formatBlockSlot .Slot }}</td>
                        <td>{{ formatValidator .Proposer }}</td>
                        <td>
                          {{ range .Tags }}
                            <span class="badge badge-primary shadow-sm text-white" {{ if .Color }}style="background-color: {{ .Color }};"{{ end }}>
                              {{ .Name }}
                            </span>
                          {{ end }}
                        </td>
                        <td>{{ formatAmount .Value.BigInt "ETH" 8 }}</td>
                        <td>
                          <span class="convertmetoutf8" id="slot_{{ .Slot }}" aria-hex-data="{{ .BlockExtraData }}"></span>
                        </td>
                        <td>{{ formatAddressAsLink .ProposerFeeRecipient "" false }}</td>
                        <td>{{ formatBuilder .Builder }}</td>
                      </tr>
                    {{ end }}
                  </tbody>
                </table>
              </div>
              <div class="tab-pane fade" id="top_blocksTabPanel" role="tabpanel" aria-labelledby="top_blocks_tab">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Slot</th>
                      <th>Proposer</th>
                      <th>Relays</th>
                      <th>Block Reward</th>
                      <th>Block Extra Data</th>
                      <th>Proposer Fee Recipient</th>
                      <th>Builder</th>
                    </tr>
                  </thead>
                  <tbody>
                    {{ range .Data.TopBlocks }}
                      <tr>
                        <td>{{ formatBlockSlot .Slot }}</td>
                        <td>{{ formatValidator .Proposer }}</td>
                        <td>
                          {{ range .Tags }}
                            <span class="badge badge-primary shadow-sm text-white" {{ if .Color }}style="background-color: {{ .Color }};"{{ end }}>
                              {{ .Name }}
                            </span>
                          {{ end }}
                        </td>
                        <td>{{ formatAmount .Value.BigInt "ETH" 8 }}</td>
                        <td>
                          <span class="convertmetoutf8" id="slot_{{ .Slot }}" aria-hex-data="{{ .BlockExtraData }}"></span>
                        </td>
                        <td>{{ formatAddressAsLink .ProposerFeeRecipient "" false }}</td>
                        <td>{{ formatBuilder .Builder }}</td>
                      </tr>
                    {{ end }}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-md-12">
            <h3>Builders:</h3>
            <p>Builders are the entities that are building the blocks distributed by the relays. Nothing prevents a single entity from using multiple Builder Public Keys, so some Builders may be opperated by the same entity. <br />Displayed below are active builders from the <b>last 14 days</b></p>
            <div id="poolTable" class="table-responsive tab-content card px-0 pb-1 mb-2">
              <table class="table" id="staking-pool-table">
                <thead>
                  <tr>
                    <th>Builder</th>
                    <th>Seen Relays</th>
                    <th>Block Count</th>
                    <th>Latest Slot</th>
                  </tr>
                </thead>
                <tbody>
                  {{ range .Data.TopBuilders }}
                    <tr>
                      <td>{{ formatBuilder .Builder }}</td>
                      <td>
                        {{ range .Tags }}
                          <span class="badge badge-primary shadow-sm text-white" {{ if .Color }}style="background-color: {{ .Color }};"{{ end }}>
                            {{ .Name }}
                          </span>
                        {{ end }}
                      </td>
                      <td>{{ .BlockCount }}</td>
                      <td>{{ formatBlockSlot .LatestSlot }} ({{ formatSlotToTimestamp .LatestSlot }})</td>
                    </tr>
                  {{ end }}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div>Last updated: <span aria-ethereum-date="{{ .Data.LastUpdated.Unix }}">{{ .Data.LastUpdated }}</span></div>
    </div>
  </section>
  <div id="tempcont" class=""></div>
{{ end }}
